<template>
    <div>
        <h3>更多用法：Vue3中离开页面自动销毁已注册的事件以及自动销毁已注册的所有定时器</h3>
        <div>随便在一个目录创建文件Config.ts或者js文件，内容：</div>
        <dCode :code="conf.moreStr" />
        <div>在任意vue文件的setup生命周期中使用，此时得到的event和timer对象和正常的CEvent和Timer用法一致</div>
        <dCode :code="conf.moreUseStr" />
        <h3>更多用法：Vue2中离开页面自动销毁已注册的事件以及自动销毁已注册的所有定时器</h3>
        <div>随便在一个目录创建文件Config.js文件，内容：</div>
        <dCode :code="conf.moreStr2" />
        <div>在任意vue文件的created生命周期中使用，此时得到的event和timer对象和正常的CEvent和Timer用法一致</div>
        <dCode :code="conf.moreUseStr2" />
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

const conf =reactive({
    moreStr:`
import { getCurrentInstance } from 'vue'
export default class Config {
    /**
     * 获取一个页面销毁不再触发的事件管理器
     * @example
     * @returns
     */
    static Event = () => {
        const _vm = getCurrentInstance()!
        const event = new CEventBean()
        event.vm = () => () => {
            return !_vm.isUnmounted
        }
        return event
    }

    /**
     * 获取一个定时器
     * @returns
     */
    static Timer = () => {
        const timer = new TimerBean()
        const _vm = getCurrentInstance()!
        timer.vm = () => () => {
            return !_vm.isUnmounted
        }
        return timer
    }
}
`,
moreUseStr:`
<template>
  <div></div>
</template>
\<script setup lang="ts"\>
import Config from './Config';
const event = Config.Event()
const timer = Config.Timer()
event.on('test',(data)=>{
    console.log('每2秒得到一次数据',data)
})
timer.on(()=>{
    console.log('每2秒执行一次')
    event.emit('test',666)
},2000)
\</script\>
`,

moreStr2:`

export default class Config {
    /**
     * 获取一个页面销毁不再触发的事件管理器
     */
    static Event = (vnode) => {
		if(vnode.event) return vnode.event
        const event = new CEventBean()
        event.vm = () => () => {
            return !vnode._isDestroyed
        }
		vnode.event = event
        return vnode.event
    }

    /**
     * 获取一个页面销毁不再执行的定时器
     */
    static Timer = (vnode) => {
		if(vnode.timer) return vnode.timer
        const timer = new TimerBean()
        timer.vm = () => () => {
            return !vnode._isDestroyed
        }
		vnode.timer = timer
        return vnode.timer
    }
}
`,
moreUseStr2:`
<template>
  <div></div>
</template>

<script>
import Config from './Config'

export default {
  created() {
    Config.Timer(this)
    Config.Event(this)
    this.event.on('test',(data)=>{
        console.log('每2秒得到一次数据',data)
    })
    this.timer.on(()=>{
        console.log('每2秒执行一次')
        this.event.emit('test',666)
    },2000)
}
\</script\>
`
})
</script>
<style lang="less" scoped></style>
